<template>
    <div class="pContent">
        <div class="div1">
            <dataPanelsVue></dataPanelsVue>
        </div>
        <div class="div2">
            <boxVue sub>
                <areaAndOrder></areaAndOrder>
            </boxVue>
        </div>
        <div class="div3">
            <boxVue sub>
                <userAndActive></userAndActive>
            </boxVue>
        </div>
        <div class="div4">
            <boxVue>
                <project></project>
            </boxVue>
        </div>
        <div class="div5">
            <boxVue>
                <userEvaluate></userEvaluate>
            </boxVue>
        </div>
    </div>
</template>
<script setup>
import boxVue from './box.vue';
import dataPanelsVue from './dataPanels.vue';
import areaAndOrder from './areaAndOrder.vue';
import userAndActive from './userAndActive.vue';
import project from './project.vue';
import userEvaluate from './userEvaluate.vue';

</script>
<style lang="scss" scoped>
.pContent {
    height: calc(100% - 100px);
    margin-top: -70px;
    padding: 15px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(33, 1fr);
    grid-template-rows: repeat(33, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;

    &>div {
        min-width: 0;
        min-height: 0;
    }

    .div1 {
        grid-area: 1 / 1 / 7 / 24;
    }

    .div2 {
        grid-area: 7 / 1 / 23 / 24;
    }

    .div3 {
        grid-area: 23 / 1 / 34 / 24;
    }

    .div4 {
        grid-area: 1 / 24 / 23 / 34;
    }

    .div5 {
        grid-area: 23 / 24 / 34 / 34;
    }
}
</style>